<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#piclist{margin:0;padding:0;position:relative;}
#piclist li{list-style-type:none;position:absolute;}
#piclist img{display:block;width:140px;height:200px;}
</style>
</head>
<body>
<button id="shuffleBtn">随机排序</button>
<ul id="piclist"></ul>

<script>
function $(selector){
	return document.querySelectorAll(selector);
}
function init(n,m){//n 图片数量，m间距
	for(var i=0;i<n;i++){
		var li=document.createElement("li");
		li.innerHTML="<img src='images/"+(i+1)+".jpg'>";
		$("#piclist")[0].appendChild(li);
		li.style.top=Math.floor(i/4)*(parseInt(getComputedStyle(li).height)+m)+"px";
		li.style.left=i%4*(parseInt(getComputedStyle(li).width)+m)+"px";//应该加一个向上取整
	}
}
init(13,50);
$("#shuffleBtn")[0].addEventListener("click",function(){
	//_arr从新生成top和left位置
	var oli = $("#piclist li"),arr = [],_arr=[];
	var ranIndex = Math.floor(Math.random()*oli.length);
	while(arr.length<13){//如果arr长度小于13，就循环执行

		if (arr.indexOf(ranIndex)==-1&&(ranIndex!=arr.length||ranIndex ==oli.length-1)) {
			arr.push(ranIndex);
			_arr.push({top:oli[ranIndex].style.top,left:oli[ranIndex].style.left})
		}
		else{
			ranIndex = Math.floor(Math.random()*oli.length);
		}
	}
	// for (var i = 0; i < oli.length; i++) {
	// 	var ranIndex=Math.floor(Math.random()*oli.length);

	// }
	console.log(_arr);
	for (var i = 0; i < oli.length; i++) {
		//重新设置li的top和left，随机生成的_arr元素.top,.left
	oli[i].style.top = _arr[i].top;
	oli[i].style.left = _arr[i].left;
	oli[i].style.transition = "all 1s";//设置时间
}
})
/*
var arr = ["ab","ac","ad","ae"];
//reduce求和类似于sort  传入a,b 返回a+b 
//b是遍历，a是每次变量的求和（a不能加元素包裹）
var count = arr.reduce(function(a,b){
     console.log(a)
    console.log(b)
    return a+"<li>"+b+"</li>";
    //""+li·ab
    //li ab + li ac
    //li ab + li ac + li ad
    //... 
},100)
console.log(count)
 */
</script>	
</body>
</html>